import React from 'react';
import App from './App';
import { OVEContext, settingsObj } from './context'
import {
  Spin,
  // Button
} from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import styles from './App.module.scss'

import versionDataList from './json/versionData'
import { updatePropsJson } from './utils/setting' // getInitParams获取

// import {versionData_1 as defaultData} from './json/data'
// import defaultData from './json/defaultData' // getInitParams获取
import defaultData from './json/Protein.json' // 蛋白数据

class Coat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'vectorEditor' + Date.now().toString(),
      timer: null,
      showApp: false, // 显示编辑器
      isProd: false, // 生产模式
      initProps: null,
      devProps: {
        v_editorName: 'OVE' + Date.now().toString(),
        v_editHeight: 800,
        v_updatePropsJson: updatePropsJson,
        v_defaultData: defaultData,
        v_comptOptions: ['custom_1', 'custom_2'],
        v_showComponent: true,
        v_previewMode: false,
        v_previewSettingsProps: null,
        v_versionList: versionDataList,
        v_initDarkMode: false,
        v_moduleTag: null,
      }
    }
  }

  // 通过windowAreactMethods.setInjectProps接收到来自【外部VUE】传入的数据，不再调用该方法
  myTimer = () => {
    this.setState({
      timer: setInterval(() => {
        if (window.Avue?.v_postInitProps) {
          this.setState({ initProps: window.Avue.v_postInitProps() })
          this.setState({ showApp: true, isProd: true })
          clearInterval(this.state.timer && this.state.timer)
        } else {
          console.error('React-> not found Avue in Coat.js');
        }
      }, 500)
    })
  }

  componentDidMount () {
    window.Areact = this
    setTimeout(this.myTimer, 0)
  }

  componentWillUnmount () {
    clearInterval(this.state.timer && this.state.timer)
  }

  render () {
    const windowAreactMethods = this.props.windowAreactMethods
    windowAreactMethods.setShowParams = ({ showApp, isProd }) => {
      this.setState({
        showApp,
        isProd,
      })
      if (showApp) clearInterval(this.state.timer && this.state.timer)
    }
    // 获取到基本的配置信息，[params]是来自vue对该插件的配置信息，stateObj [{showApp, isProd}]
    windowAreactMethods.setInjectProps = (params, stateObj) => {
      const { showApp, isProd } = stateObj
      if (isProd) {
        this.setState({ initProps: params })
      }
      this.setState({ showApp, isProd })

      if (showApp) {
        clearInterval(this.state.timer && this.state.timer)
      }
    }

    return (
      <OVEContext.Provider value={{ ...settingsObj, windowAreactMethods: windowAreactMethods }}>
        <div className={styles.AppCoat}>
          {
            this.state.showApp
              ?
              <App
                injectProps={this.state.isProd ? this.state.initProps : this.state.devProps}
                contextSettingsObj={settingsObj}
                showApp={this.state.showApp} />
              :
              <div className={styles.coatSpinBox}>
                <div
                  className={styles.coatSpinBoxChild}
                  style={{ background: (this.state.isProd && this.state.initProps?.v_initDarkMode) ? '#2a3742' : '#fff' }}>
                  <Spin wrapperClassName={'coatSpinBoxChild'}
                    indicator={<LoadingOutlined style={{ fontSize: 40, color: '#7fc2f6' }} />} size="large" />
                </div>
              </div>
          }
        </div>
      </OVEContext.Provider>
    )
  }
}
Coat.contextType = OVEContext;

export default Coat;